import React from "react";
import GridWrapper from "../gridWrapper";
import DashboardChart from "components/charts/dashboardChart";
import ProgressChart from "components/charts/progressChart";
import { compose, lifecycle, withStateHandlers } from "recompose";

import defaultApi from "utils/api/defaultApi";

import "assets/less/components/charts/computerChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 7, h: 9, minH: 9, minW: 7},
    { i: "b", x: 7, y: 0, w: 7, h: 9, minH: 9, minW: 7  },
    { i: "c", x: 14, y: 0, w: 7, h: 17, minH: 17, minW: 7  }
  ],
  md: [
    { i: "a", x: 0, y: 0, w: 8, h: 9, minH: 9, minW: 8 },
    { i: "b", x: 8, y: 0, w: 8, h: 9, minH: 9, minW: 8 },
    { i: "c", x: 16, y: 0, w: 8, h: 13, minH: 13, minW: 8 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 6, h: 9, minH: 9, minW: 6 },
    { i: "b", x: 8, y: 0, w: 6, h: 9, minH: 9, minW: 6 },
    { i: "c", x: 16, y: 0, w: 6, h: 13, minH: 13, minW: 6 }
  ]
};

const ComputerChart = ({ memory, cpuAll, cpuArray }) => {
  let freeMem = 0,
    memoryValue = 0;
  if (memory[2] === "M" && memory[1] > 0) {
    freeMem = memory[1] / 1024;
  } else if (memory[2] === "G") {
    freeMem = memory[1];
  }
  freeMem &&
    (memoryValue = (((memory[0] - freeMem) / memory[0]) * 100).toFixed(2));
  return (
    <GridWrapper className="computer-chart" layouts={layouts}>
      <DashboardChart
        value={memoryValue}
        title="内存使用情况"
        name="内存"
        width={350}
      />
      <DashboardChart
        value={cpuAll}
        title="总cup使用率"
        name="cpu"
        width={350}
      />
      <ProgressChart
        value={cpuArray}
        title="cpu使用详情"
        name="cpu"
        width={550}
      />
    </GridWrapper>
  );
};

export default compose(
  withStateHandlers(
    () => ({
      memory: [0, 0, "G"],
      cpuAll: 0,
      cpuArray: []
    }),
    {
      updateComputerInfo: () => ({
        memory = [0, 0, "G"],
        cpuAll = 0,
        cpuArray = []
      }) => {
        return {
          memory,
          cpuAll,
          cpuArray
        };
      }
    }
  ),
  lifecycle({
    componentDidMount() {
      const { updateComputerInfo } = this.props;

      defaultApi("/computer/info").then(({ totalMem, freeMem, cpus }) => {
        const memory = [
          parseFloat(totalMem.slice(0, totalMem.length - 1)),
          parseFloat(freeMem.slice(0, freeMem.length - 1)),
          freeMem.slice(freeMem.length - 1)
        ];
        const cpuAll = cpus.reduce((a, b) => a + b) / cpus.length;
        updateComputerInfo({ memory, cpuAll, cpuArray: cpus });
      });

      //   const socket = new WebSocket("ws://localhost:3333/socket/compinfo");
      //   socket.onmessage = msg => {
      //     let data = JSON.parse(msg.data);
      //     const { totalMem, freeMem, cpus } = data;
      //     const memory = [
      //       parseFloat(totalMem.slice(0, totalMem.length - 1)),
      //       parseFloat(freeMem.slice(0, freeMem.length - 1)),
      //       freeMem.slice(freeMem.length - 1)
      //     ];
      //     const cpuAll = cpus.reduce((a, b) => a + b) / cpus.length;
      //     updateComputerInfo({ memory, cpuAll, cpuArray: cpus });
      //   };
    }
  })
)(ComputerChart);
